<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script type="text/javascript" src="UIBase.js">
  </script>
  <style>
  .active{
    background: yellow;
  }
  </style>
  <title>Document</title>
</head>
<body>
  <script type="text/javascript">
        class List  extends UIBase{
          constructor (num){
            super({num,
              currentIndex:0});
          }

          up(){
            var index=this.props.currentIndex;
            if(index === 0){
              index=this.props.num-1;
            }
            else{
              --index;
            }
               this.props.currentIndex=index;
               this.render();
          }

          down(){
            var index=this.props.currentIndex;
            if(index === 0){
              index=this.props.num-1;
            }
            else{
              --index;
            }
               this.props.currentIndex=index;
               this.render();
          }


      //子类_render的作用就是返回一个要渲染到页面的html元素，父类的render()负责渲染
      //子类在每次按下up 或者 down 时会重新给<li class="">赋值，然后再给父类渲染
          _render(props){
            var num=props.num;
            var lis="";
            for(let i=0;i<num;i++){
              lis+=`<li class="${props.currentIndex === i?"active":""}">${"aaa-"+i}</li>
              `;
            }

            var html=`
            <ul>
            ${lis}
            </ul>
            `;
          return html;
          }
        }
             var list=new List(8);
             document.body.appendChild(list.element);
             document.addEventListener("keydown",function (event){
                if(event.keyCode === 38){
                  list.up();
                }
                if(event.keyCode === 40){
                      list.down();
                }
             });
  </script>
</body>
</html>
